<template>
  <div class="home">
    <img class="img100 cover"
      :src="siteInfo.data && siteInfo.data.cover">
    <div class="next"
      @click="gotoLive">进入图片直播
      <Icon type="md-arrow-round-forward" />
    </div>
    <div class="countDown">{{countDownTime}}</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'home',
  computed: {
    ...mapState(['siteInfo'])
  },
  data() {
    return {
      countDownTime: 5,
      timer: 0
    }
  },
  methods: {
    gotoLive() {
      window.clearInterval(this.timer)
      this.$router.push({
        path: '/Live',
        query: {
          albumId: this.$route.query.albumId
        }
      })
    },
    countDown() {
      this.timer = window.setInterval(() => {
        this.countDownTime -= 1
        if (this.countDownTime <= 0) {
          window.clearInterval(this.timer)
          this.$router.push({
            path: '/Live',
            query: {
              albumId: this.$route.query.albumId
            }
          })
        }
      }, 1000)
    }
  },
  mounted() {
    this.countDown()
  }
}
</script>

<style lang="scss" scoped>
.home {
  .cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .next {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #333;
    text-align: center;
    font-size: 18px;
  }
  .countDown {
    position: fixed;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    top: 30px;
    right: 30px;
    background: rgba(20%, 20%, 20%, 0.6);
    border-radius: 50%;
    font-weight: bold;
    font-size: 16px;
  }
}
</style>
